De getElementsByClassName methode

Gebruik

Net zoals document.getElementById een element selecteert met een bepaalde id waarde, verzamelt getElementsByClassName elementen op een pagina met dezelfde class waarde. Dat Zoals het meervoud naam van de methode laat vermoeden verzamelt getElementsByClassName een reeks van elementen, en retourneert dus altijd een array, zelfs als het overeenkomt met slechts één element op de pagina.

Technisch gezien retourneert getElementsByClassName een HTMLCollection array, een matrix-structuur, in plaats van een echte array.

We hebben bijvoorbeeld het volgende element op de pagina:

<div class="banner"> … </div>

We kunnen dit element en alle andere waarvan de waarde van het class attribuut banner opvragen met de methode getElementsByClassName en het resultaat in een variabele stoppen:

var banner = document.getElementsByClassName("banner");

Het eerste element kunnen we in de Developer Console opvragen met:

banner[0]

en krijgen als antwoord:

> <div class="banner"> … </div>

Omdat de retourwaarde altijd een array is, moet je er doorheen lopen om de indivuele elementen te selecteren. Traditioneel wordt doe je dit met een for lus, maar er zijn veel alternatieven:

for (var i = 0; i < banner.length; i++) { 
    // doe iets met banner[i]; 
}

Veelheid

Elementen kunnen meerdere klassen toegewezen krijgen in het attribuut class. Dus stelt getElementsByClassName ons in staat om bepaalde combinaties van klassen te selecteren:

var bannerBig = document.getElementsByClassName ("banner big");

De bovenstaande JavaScript haalt alle elementen op die zowel van klasse banner als van de klasse big zijn.

Bereik en doel

In tegenstelling tot de methode document.getElementById, kan je de methode getElementsByClass opvragen vanaf om het even welke element op de pagina. Dat wil zeggen dat je het bereik van je zoekactie kan vernauwen tot kinderen van het opgegeven element.

Veronderstel dan je twee nav elementen hebt:

<nav id="mainnav">
    <a href="#" class="single">Home</a>
    <a href="#" class="single">Over ons</a>
    <a href="#" class="multi">Opties</a> 
    <a href="#" class="multi">Onze producten</a>
    <a href="#" class="multi">Onze klanten</a>
</nav>

<nav id="product">
    <a href="#" class="single">Boter</a>
    <a href="#" class="single">Vis</a>
    <a href="#" class="single">Vlees</a>
    <a href="#" class="single">Groenten</a>
    <a href="#" class="single">Drank</a>
</nav>

Je kan alle 'single( links ophalen met:

var single = document.getElementsByClassName("single");

Alle 'single' links, maar alleen van de nav met id = mainnav:

var nav = document.getElementById("mainnav"); 
var navlinks = nav.getElementsByClassName("single");

Als je de referentie naar #mainnav niet nodig hebt kan je de twee statements samentrekken tot één:

var navlinks = document.getElementById("mainnav").getElementsByClassName("single");